<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设备更换详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        #layer-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }

        a:hover {
            cursor: pointer;
            text-decoration: none;
        }
    </style>
</head>
<body>

<div class="layui-fluid" id="container">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="device-replace-form">
                <input type="hidden" name="id">
                <div class="layui-row">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">工单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="no" class="layui-input" v-model="form.no" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="ayui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换设备</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换前品牌</label>
                            <div class="layui-input-block">
                                <input type="text" id="brand1" name="brand1" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换后品牌</label>
                            <div class="layui-input-block">
                                <input type="text" name="brand2" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换前型号</label>
                            <div class="layui-input-block">
                                <input type="text" name="model1" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换后型号</label>
                            <div class="layui-input-block">
                                <input type="text" name="model2" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换前规格</label>
                            <div class="layui-input-block">
                                <input type="text" name="spec1" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换后规格</label>
                            <div class="layui-input-block">
                                <input type="text" name="spec2" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换前出厂编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="productNo1" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换后出厂编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="productNo2" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换前生产日期</label>
                            <div class="layui-input-block">
                                <input type="text" id="product-date1" name="productDate1" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换后生产日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="productDate2" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换前备注</label>
                            <div class="layui-input-block">
                                <input type="text" name="note1" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换后备注</label>
                            <div class="layui-input-block">
                                <input type="text" name="note2" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建人</label>
                            <div class="layui-input-block">
                                <input type="text" name="createByName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换人</label>
                            <div class="layui-input-block">
                                <input type="text" name="replaceByName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="createTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">更换时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="replaceTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="stateText" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div v-if="form.state>0" class="layui-card">
        <div class="layui-card-header">流程信息</div>
        <div class="layui-card-body">
            <div id="layer-activities"></div>
        </div>
    </div>
    <div style="text-align: center">
        <button class="layui-btn layui-btn-primary" v-if="form.state>0&&form.state<2" @click="terminate">撤销</button>
    </div>
</div>
<script id="activities-tpl" type="text/html">
    <ul class="layui-timeline">
        {{# layui.each(d, function (index, item) { }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h4 style="font-weight: bold;">{{item.name}}【{{item.ownerName}}】</h4>
                <p>{{item.completeTime || '待完成'}}</p>
            </div>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无流程数据
        {{# } }}
    </ul>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/vue.min.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'customSelect', 'tree'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var admin = layui.admin;
        var select = layui.customSelect;
        var id = getParam('id');
        var taskId = getParam('taskId');
        layui.util.fixbar();

        function loadUsers(callback) {
            $.get('users', function (result) {
                if (callback) {
                    callback(result.data);
                }
            });
        }

        new Vue({
            el: "#container",
            data() {
                return {
                    form: {
                        devices: '',
                        locations: '',
                        state: 0
                    },
                    task: {}
                }
            },
            mounted() {
                if (taskId) {
                    this.loadTask(taskId);
                } else if (id) {
                    this.loadForm(id);
                } else {
                    this.loadDevices();
                }
            },
            updated() {
                form.render();
            },
            methods: {
                loadForm(id) {
                    let that = this;
                    $.get('/device-replaces/' + id, function (result) {
                        var data = result.data;
                        that.form = data;
                        form.val('device-replace-form', data);
                        //流程信息
                        $.get('/tasks/proc-inst-tasks', {procInstId: data.procInstId}, function (res) {
                            var tpl = $('#activities-tpl').html();
                            laytpl(tpl).render(res.data, function (html) {
                                $('#layer-activities').html(html);
                            });
                        });
                    });
                },
                loadTask(taskId) {
                    let that = this;
                    $.get('/tasks/' + taskId, function (res) {
                        that.task = res.data;
                        if (that.task) {
                            that.loadForm(that.task.formKey);
                        }
                        if (that.task.state == 2) {
                            layer.msg('该任务已处理');
                        }
                    });
                },
                terminate() {
                    let that = this;
                    layer.confirm('确定撤销该工单吗？', function (index) {
                        $.post('/device-replaces/terminate', {
                            id: that.form.id
                        }, function () {
                            layer.msg('工单已撤销');
                        });
                    });
                }
            }
        })
    });
</script>
</body>
</html>